<%--
  Created by IntelliJ IDEA.
  User: 86130
  Date: 2020/12/25
  Time: 11:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/layui.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/view.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/common.css" />
    <title></title>
</head>
<body class="layui-view-body">
<div class="layui-content"  >
    <h1 class="mytitle"  >各系人数分布统计图 (单位/人)</h1>
    <div id="analyzeDept" style="width: 98%;height: 85%;margin-left:1%   "  >

    </div>
</div>
<script src="${pageContext.request.contextPath}/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath}/jquery.js"></script>
<script src="${pageContext.request.contextPath}/echarts.min.js"></script>


<script>
    var element = layui.element;
    $(document)
        .ready(
            function() {
                var myChart = echarts
                    .init(document
                        .getElementById('analyzeDept'));

                myChart.showLoading();
                // 异步加载数据
                var names = [];    //类别数组（实际用来盛放X轴坐标值）
                var nums = [];    //销量数组（实际用来盛放Y坐标值）

                $.ajax({
                    type: "post",
                    async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                    url: "${pageContext.request.contextPath}/index/findDept",    //请求发送到TestServlet处
                    data: {},
                    dataType: "json",        //返回数据形式为json
                    success: function (result) {
                        console.log(result);

                        //请求成功时执行该函数内容，result即为服务器返回的json对象
                        if (result) {
                            for (let i = 0; i < result.length; i++) {
                                names.push(result[i].name);    //挨个取出类别并填入类别数组
                            }
                            for (let i = 0; i < result.length; i++) {
                                nums.push(result[i].totalStudent);    //挨个取出销量并填入销量数组
                            }
                            console.log(nums);
                            console.log(names);
                            myChart.hideLoading();    //隐藏加载动画


                            myChart.setOption ({
                                backgroundColor: '#061326',
                                grid: {
                                    top: "25%",
                                    left: "-5%",
                                    bottom: "5%",
                                    right: "5%",
                                    containLabel: true
                                },
                                tooltip:{
                                    show:true
                                },
                                animation: true,
                                xAxis: [{
                                    type: "category",
                                    data: names,
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    nameTextStyle: {
                                        color: "#82b0ec"
                                    },
                                    axisLine: {
                                        show: false,
                                        lineStyle: {
                                            color: "#82b0ec"
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: "#fff"
                                        },
                                        margin: 30
                                    }
                                }],
                                yAxis: [{
                                    show: false,
                                    type: "value",
                                    axisLabel: {
                                        textStyle: {
                                            color: "#fff"
                                        },
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            color: "#0c2c5a"
                                        }
                                    },
                                    axisLine: {
                                        show: false
                                    }
                                }],
                                series: [{
                                    name: "",
                                    type: 'pictorialBar',
                                    symbolSize: [40, 10],
                                    symbolOffset: [0, -6],
                                    symbolPosition: 'end',
                                    z: 12,
                                    // "barWidth": "0",
                                    label: {
                                        normal: {
                                            show: true,
                                            position: "top",
                                            // "formatter": "{c}%"
                                            fontSize: 25,
                                            fontWeight: 'bold',
                                            color: '#34DCFF'
                                        }
                                    },
                                    color: "#2DB1EF",
                                    data: nums
                                },
                                    {
                                        name: '',
                                        type: 'pictorialBar',
                                        symbolSize: [40, 10],
                                        symbolOffset: [0, 7],
                                        // "barWidth": "20",
                                        z: 12,
                                        color: "#2DB1EF",
                                        data: nums
                                    },
                                    {
                                        name: '',
                                        type: 'pictorialBar',
                                        symbolSize: [50, 15],
                                        symbolOffset: [0, 12],
                                        z: 10,
                                        itemStyle: {
                                            normal: {
                                                color: 'transparent',
                                                borderColor: '#2EA9E5',
                                                borderType: 'solid',
                                                borderWidth: 1
                                            }
                                        },
                                        data: nums
                                    },
                                    {
                                        name: '',
                                        type: 'pictorialBar',
                                        symbolSize: [70, 20],
                                        symbolOffset: [0, 18],
                                        z: 10,
                                        itemStyle: {
                                            normal: {
                                                color: 'transparent',
                                                borderColor: '#19465D',
                                                borderType: 'solid',
                                                borderWidth: 2
                                            }
                                        },
                                        data: nums
                                    },
                                    {
                                        type: 'bar',
                                        //silent: true,
                                        barWidth: "40",
                                        barGap: '10%', // Make series be overlap
                                        barCateGoryGap: '10%',
                                        itemStyle: {
                                            normal: {
                                                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                                                    offset: 0,
                                                    color: "#38B2E6"
                                                },
                                                    {
                                                        offset: 1,
                                                        color: "#0B3147"
                                                    }
                                                ]),
                                                opacity: .8
                                            },
                                        },
                                        data: nums
                                    }
                                ]
                            });
                        }
                    },
                    error: function (errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        myChart.hideLoading();
                    }
                })
            });


</script>
</body>
</html>
